// 从 vue-router 插件包中引入 createRouter 的方法
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 引入组件
import MainView from "../views/main/MainView.vue";
// 用户部分
import NotFind from "../views/404/NotFind.vue";
import { App } from "vue";
import LoginView from "@/views/login/loginView.vue";
// import ProductAdd from "@/views/goods/manege/goodsHand/ProductAdd.vue";
// import MenuItem from "../../src/components/types/global";
import { useAdminStore } from "@/store/admin";
// import MenuItem from "element-plus/lib/components/menu/src/utils/menu-item.js";
const routes: RouteRecordRaw[] = [
    {
        path: "/login",
        component: LoginView
    },
    {
        path: "/",
        component: MainView,
        name: "MainView",
        //配置二级路由
    },
    // 配置404
    {
        path: "/:pathMatch(.*)*",
        component: NotFind
    },
    // {
    //     path: "/goods/handle",
    //     component: ProductAdd
    // },
    // {
    //     path: "/goods/update/:_id",
    //     component: ProductAdd
    // },
]
const router = createRouter({
    // routes：用来进行项目中所有页面的路由配置
    routes,
    // history：配置路由模式
    // createWebHistory() 表示 history 模式
    // createWebHashHistory() 表示 hash 模式
    history: createWebHistory()
});

router.beforeEach((to, from) => {
    if (to.name == 'MainView') {
        // 判断用户是否登录
        // console.log(to);
        // const token = localStorage.user_token;
        // if (!token) {
        //     return { path: '/login', replace: true };
        // }
    }
})

// token验证失败，重新登录
export const toLogin=()=>{
    const adminStore=useAdminStore()
    adminStore.messageOut()
    router.push("/login")
}
// 路由白名单(不用登录可以直接访问的页面)
const WHITE_LIST = ['/login'];

let isAdded = false;

// 全局前置守卫
router.beforeEach(async (to, from) => {
    if (WHITE_LIST.includes(to.path)) {
        // 进入if，表示当前访问的页面【属于】白名单页面
        return true;
    }
    // console.log(router.getRoutes());
    // 如果代码执行到这一行，就表示当前访问的页面【不属于】白名单页面
    // 判断用户是否登录
    const token = localStorage.user_token;
    if (!token) {
        // 进入 if，则表示当前访问的页面需要先登录才能进入，但是用户没有登录
        return { path: '/login', replace: true };
    }

    // 如果代码执行到这一行，说明用户访问的是系统内部页面，并且用户登录了
    /**
     * 1. 调用状态机中公共的请求（发送请求获取权限数据）
     * 2. 根据请求结果动态添加路由配置
     */
    const adminStore = useAdminStore();
    const permissions = await adminStore.getAdminInfoAsync();
    // console.log(permissions);
    console.log(routesDataFormat(permissions),"permissions");
    // console.log(router.getRoutes(),333);
    if (permissions && !isAdded) {
        routesDataFormat(permissions).forEach(item => {
            // MainView 是父级路由的 name 值
            router.addRoute('MainView', {
                path: item.path,
                // 懒加载
                component: () => import('../views' + item.component + '.vue')
            })
        })
        isAdded = true;
        return {
            ...to,
            replace: true
        }
    }
})

const routesDataFormat = (permissions: menuItem[]): menuItem[] => {
    return permissions.reduce((prev: menuItem[], item: menuItem) => {
        if (item.children) {
            // 判断 children 中是否包含 menu 类型的数据
            const hasMenu = item.children.some(child => child.type == 'menu');
            if (hasMenu) {
                // children 中有 menu 类型，说明当前 item 是一级菜单，不参与路由配置
                return [
                    ...prev,
                    ...routesDataFormat(item.children)
                ]
            }
            // children 中全都是 button 类型，说明当前 item 没有子菜单，要参与路由配置
            return [
                ...prev,
                item,
                ...routesDataFormat(item.children)
            ]
        }
        if (item.component) {
            return [
                ...prev,
                item
            ]
        }
        return prev;
    }, [])
}

// 将私有变量 router 暴露出去给其他文件使用
export const setupRouter = (app: App<Element>) => {
    app.use(router)
};